<template>
	<div id="login">
		<div class="row" style="margin-top:100px;">
		<div class="col-md-4 col-md-push-4">
		<div class="well col-md-10">
		<h3>用户注册</h3>
		<h4 v-show="show" style="color: #f40;">{{status}}</h4>
		<div class="input-group input-group-md">
		<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
		<input type="text" class="form-control" placeholder="用户名" aria-describedby="sizing-addon1" v-model="username">
		</div>
		<div class="input-group input-group-md">
		<span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span>
		<input type="password" class="form-control" placeholder="密码" aria-describedby="sizing-addon1" v-model="psw">
		</div>
		
		<button type="submit" class="btn btn-success btn-block" @click="reg">
		注册
		</button>
		</div>
		</div>
		
		</div>
	</div>
</template>

<script>
	import {
		reg
	} from "../network/home.js"
	export default {
		name:"login",
		data(){
			return {
				status:"",
				show:false,
				username: "",
				psw: ""
			}
			
		},
		methods:{
			reg() {
				reg(this.username, this.psw).then(
					res => {
						this.error = res.data.error;
						this.status = res.data.status;
			
						if (this.status == "success") {
							console.log("注册成功");
							// this.$store.commit("usernameUpdate", this.username);
							this.$router.replace("/login")
						}else{
							alert(this.status);
							this.show=true;
							
						}
			
			
			
					}
			
				).catch(err => {
					console.log(err)
				});
			
			
			
			}
		}
		
	}
</script>

<style scoped>

	
	.input-group{
	margin:10px 0px;
	}
	h3{
	padding:5px;
	border-bottom:1px solid #ddd;
	}
	li{
	list-style-type:square;
	margin:10px 0;
	}
	em{
	color:#c7254e;
	font-style: inherit;
	background-color: #f9f2f4;
	}
</style>
